<template>
  <div class="content-in">
    <div class="header">
      <img src="@/assets/images/service/banner1.png" alt="solution" />
      <div class="tx">
        <p class="ft28">{{ lang === 'en' ? 'SERNICE' : '随时为您服务' }}</p>
        <p>{{ $t('service.banner') }}</p>
      </div>
    </div>
    <div class="d-content">
      <!-- <h1 class="d-title grey"></h1> -->
      <h1 class="d-title mg-b-60">{{ lang === 'en' ? 'PROFESSIONAL SERVICES' : '专业服务' }}</h1>
    </div>
    <div class="tab">
      <div class="tabin">
        <a
          v-for="item in tabs"
          :key="item.key"
          :class="{
            active: active === item.key,
          }"
          @click="active = item.key"
        >
          {{ item[lang] }}
        </a>
      </div>
      <div v-if="active === 1" class="panel">
        <h1>{{ tabs[0][lang] }}</h1>
        <p>{{ $t('login.tips') }}</p>
        <p class="ft30 mt-40">177-8203-0739</p>
        <p>{{ $t('service.workTime') }}</p>
        <p class="block mt-40">{{ $t('common.contact') }}</p>
        <div class="flex">
          <div class="flex-1">
            <img
              src="http://bepai-sotenowe.oss.bepai.net/source/on-line/%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg"
              alt=""
            />
            <p>{{ $t('contactUs.wechat') }}</p>
          </div>
          <!-- <div class="flex-1">
            <img src="@/assets/images/service/qrcode.png" alt="" />
            <p>QQ</p>
          </div> -->
        </div>
      </div>
      <div v-if="active === 2" class="panel">
        <h1>{{ tabs[1][lang] }}</h1>
        <p>{{ $t('login.tips') }}</p>
        <p class="mt-40">{{ $t('common.search') }}</p>
        <el-input v-model="serialNumber" :placeholder="$t('service.serialNumber')"></el-input>
        <el-button :loading="loading" @click="handleSearch">{{ $t('common.submit') }}</el-button>
        <el-collapse v-if="!!files.length" v-model="activeNames">
          <el-collapse-item
            v-for="(item, index) in files"
            :key="item.id"
            :title="item[`name${capitalizeLang}`]"
            :name="index"
          >
            <el-tabs v-model="fileActiveName[index]">
              <el-tab-pane
                v-for="file in fileTabs"
                :key="file.name"
                :label="file[`label${capitalizeLang}`]"
                :name="file.name"
              >
                <div
                  v-for="(aItem, aIndex) in item.attachment[file.name]"
                  :key="aIndex"
                  class="file-item"
                >
                  <span>{{ aItem.name }}</span>
                  <span class="download" @click="handleDownload(aItem)">
                    {{ $t('service.download') }}
                  </span>
                </div>
                <span
                  v-if="!(item.attachment[file.name] && item.attachment[file.name].length !== 0)"
                  class="grey"
                >
                  {{ lang === 'en' ? 'empty' : '暂无数据' }}
                </span>
              </el-tab-pane>
            </el-tabs>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div v-if="active === 3" class="panel">
        <h1>{{ tabs[2][lang] }}</h1>
        <p>{{ $t('login.tips') }}</p>
        <el-form ref="form" :model="form" label-position="top">
          <el-form-item :label="$t('service.repair.productRegistry')">
            <el-input
              v-model="form.name"
              :placeholder="$t('service.repair.placeholder')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('service.repair.warrantyInquiry')">
            <el-input
              v-model="form.name"
              :placeholder="$t('service.repair.placeholder')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('service.repair.repairRequest')">
            <el-input v-model="form.name" placeholder="Please enter your Repair Request"></el-input>
          </el-form-item>
          <el-form-item :label="$t('service.repair.repairProgress')">
            <el-input
              v-model="form.name"
              :placeholder="$t('service.repair.placeholder')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('service.repair.authorizedService')">
            <el-input
              v-model="form.name"
              :placeholder="$t('service.repair.placeholder')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('service.repair.warrantyPolicy')">
            <el-input
              v-model="form.name"
              :placeholder="$t('service.repair.placeholder')"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-button>{{ $t('common.submit') }}</el-button>
      </div>
      <div v-if="active === 4" class="panel">
        <h1>{{ tabs[3][lang] }}</h1>
        <p>{{ $t('login.tips') }}</p>
        <p class="blue mt-40">{{ $t('service.q1') }}</p>
        <p>{{ $t('service.a1') }}</p>
        <p class="blue">{{ $t('service.q2') }}</p>
        <p>{{ $t('service.a2') }}</p>
        <p class="blue">{{ $t('service.q3') }}</p>
        <p>{{ $t('service.a3') }}</p>
        <p class="blue">{{ $t('service.q4') }}</p>
        <p>{{ $t('service.a4') }}</p>
        <p class="blue">{{ $t('service.q5') }}</p>
        <p>{{ $t('service.a5') }}</p>
        <p class="blue">{{ $t('service.q6') }}</p>
        <p>{{ $t('service.a6') }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import * as api from '@/const/api'
export default {
  data() {
    return {
      tabs: [
        {
          key: 1,
          zh: '在线支持',
          en: 'Online Support',
        },
        {
          key: 2,
          zh: '文件下载',
          en: 'File Download',
        },
        {
          key: 3,
          zh: '维修服务',
          en: 'Repair Service',
        },
        {
          key: 4,
          zh: '常见问题',
          en: 'FAQS',
        },
      ],
      fileTabs: [
        {
          labelZh: '产品视频',
          labelEn: 'Product videos',
          name: '1',
        },
        {
          labelZh: '规格书',
          labelEn: 'Datasheet',
          name: '2',
        },
        {
          labelZh: '用户手册',
          labelEn: 'User Manual',
          name: '3',
        },
        {
          labelZh: '集成手册',
          labelEn: 'Integration Manual',
          name: '4',
        },
        {
          labelZh: 'SDK',
          labelEn: 'SDK',
          name: '5',
        },
      ],
      active: 1,
      form: {},
      serialNumber: '',
      loading: false,
      activeNames: '0',
      fileActiveName: {},
      files: [],
    }
  },
  computed: {
    ...mapState(['menus', 'lang']),
    ...mapGetters(['capitalizeLang']),
  },
  methods: {
    async handleSearch() {
      try {
        if (!this.serialNumber) {
          this.files = []
          return
        }

        this.loading = true

        this.fileActiveNam = {}
        this.activeNames = '0'

        const { code, msg, data } = await this.$axios.$post(api.attachmentInfoPage, {
          typeZh: this.serialNumber,
        })
        if (+code !== 200) {
          throw new Error(msg || this.$t('common.form.error'))
        }
        this.files = data.list.map((item) => ({
          ...item,
          attachment: JSON.parse(item.attachment),
        }))

        data.list.forEach((_, index) => {
          this.$set(this.fileActiveName, index, '1')
        })
      } catch (err) {
        this.$message.error(err.message)
      } finally {
        this.loading = false
      }
    },
    handleDownload(file) {
      // 获取heads中的filename文件名
      const downloadElement = document.createElement('a')
      // 创建下载的链接
      downloadElement.href = file.response
      downloadElement.target = '_blank'
      // 下载后文件名
      downloadElement.download = file.name
      document.body.appendChild(downloadElement)
      // 点击下载
      downloadElement.click()
      // 下载完成移除元素
      document.body.removeChild(downloadElement)
    },
  },
}
</script>

<style lang="less" scoped>
@import '~assets/var';

.content-in {
  background: #f6f7f9;
  .pd(0, 0, 60, 0);

  .header {
    display: flex;
    position: relative;

    img {
      width: 100%;
    }

    .tx {
      position: absolute;
      .height(242);
      .width(1141);
      .top(120);
      .pd(25, 100, 0, 360);
      .ft(18);
      .lineH(24);

      background-color: rgba(0, 0, 0, 0.5);
      left: 0;
      color: #fff;

      .ft36 {
        .ft(36);
        .lineH(30);

        font-weight: bold;
        .mg(0, 0, 10, 0);

        color: rgba(255, 255, 255, 0.2);
      }

      .ft28 {
        .ft(28);
        .width(308);
        .pd(0, 0, 10, 0);
        .mg(20, 0, 20, 0);
        .lineH(30);

        border-bottom: 2px solid #5b8ad6;
        font-weight: bold;
      }
    }
  }

  .d-content {
    .width(1200);

    margin: 0 auto;
    .pd(60, 0, 60, 0);

    .d-title {
      .ft(30);
      .lineH(30);

      text-align: center;
      color: #333;

      &.grey {
        color: #b0b7bd;
      }
    }
  }

  .tab {
    .width(1200);

    margin: 0 auto;
    min-height: 35vw;
    background: #fff;
    display: flex;

    .tabin {
      .width(220);
      .pd(60, 0, 0, 0);

      border-right: 1px solid #f0f1f3;

      a {
        display: block;
        .height(54);
        .lineH(54);
        .ft(18);

        color: #333;
        text-align: center;
        border-left: 2px solid transparent;

        &:hover {
          background-color: #f0f1f3;
        }

        &.active {
          border-left: 2px solid #0762cb;
          background-color: #f0f1f3;
        }
      }
    }

    .panel {
      flex: 1;
      overflow: hidden;
      .pd(60, 80, 60, 80);
      .ft(16);

      color: #666;
      font-weight: bold;

      h1 {
        .ft(26);
        .mg(0, 0, 15, 0);

        color: #0762cb;
      }

      .ft30 {
        .ft(30);

        color: #333;
        font-weight: 800;
      }

      .mt-40 {
        .mg(40, 0, 0, 0);
      }

      .block {
        color: #333;
      }

      .flex {
        .mg(10, 0, 0, 0);

        .flex-1 {
          .ft(18);

          text-align: center;
          font-weight: bold;

          img {
            .width(120);
            .height(120);
          }
        }
      }

      .el-input {
        .width(400);
        .height(54);
        .mg(20, 0, 60, 0);

        :deep(.el-input__inner) {
          background: #f6f7f9;
        }
      }

      .el-button {
        .width(180);
        .height(36);
        .lineH(36);

        background: #0261bc;
        border-radius: 30px;
        color: #fff;
        border: none;
        padding: 0;
        display: block;
      }

      :deep(.el-form) {
        .ft(18);

        display: flex;
        flex-wrap: wrap;
        .mg(20, 0, 40, 0);

        .el-form-item {
          width: 50%;
          .mg(0, 0, 0, 0);
        }

        .el-form-item__label {
          .mg(10, 0, 0, 0);

          padding: 0;
        }

        .el-form-item__content {
          .el-input {
            .width(310);

            margin: 0;
          }
        }
      }

      :deep(.el-collapse) {
        margin-top: 20px;
      }

      .file-item {
        display: flex;
        justify-content: space-between;
        .mg(8, 0, 8, 0);

        .download {
          color: #0261bc;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
